<template>
	<div class="page-header">
		<el-button type="primary" icon="CirclePlus" size="small">添加</el-button>
	</div>
	<div class="page-card">
		<el-table :data="postList" @selection-change="handleSelectionChange" v-loading="loading">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" />
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="url" label="url" />
			<el-table-column fixed="right" label="管理" width="120">
				<template #default="scope">
					<el-button @click="onDel(scope.row,scope.$index)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<QPagination :current-page="currentPage" :page-count="pageCount" :page-size="pageSize" :data-total="dataTotal"
			@current-change="pageChange"></QPagination>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import http from "@/utils/request"
import QPagination from '../../components/q-pagination/q-pagination.vue';

let postList = ref([]);
let pageCount = ref(0);
let currentPage = ref(1);
let dataTotal = ref(1);
const pageSize = ref(10);
let selectIds = ref([]);
let loading = ref(false);

onMounted(function () {
	getPostList();
})

function getPostList() {
	loading.value = true;
	http.get('/admin/user/ruleList', {
		page: currentPage.value
	}).then(res => {
		if (res.code == 200) {
			pageCount.value = res.result.last_page;
			dataTotal.value = res.result.total;
			postList.value = res.result.data;
		}

		loading.value = false;
	});
}

function pageChange(page) {
	currentPage.value = page;
	getPostList();
}

function handleSelectionChange(e) {
	let ids = [];
	e.forEach(item => {
		ids.push(item.id)
	})

	selectIds.value = ids;
}

function onDel(row, index) {
	ElMessageBox.confirm(
		'确认删除?',
		'提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}
	).then(() => {
		let ids = []
		if (row) {
			ids.push(row.id)
		} else {
			ids = selectIds.value
		}

		http.post('/admin/user/ruleDelete', {
			rule_ids: ids
		}).then(res => {
			if (res.code == 200) {
				getPostList();
				ElMessage({
					type: 'success',
					message: '删除成功',
				})
			} else {
				ElMessage({
					type: 'error',
					message: '删除失败',
				})
			}
		})
	})
}
</script>

<style lang="scss" scoped="scoped">
.img-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2px;

	img {
		width: 100%;
		height: 80px;
	}
}
</style>
